<link rel="stylesheet" href="[:app]/css/checkbox.css">
<div id="page-content">
    <div class="clear">
        <div class="group border radius m-t-15 col-md-3" v-for="(group, gk) in groups" v-cloak>
            <div class="modal-header">
                <button type="button" class="close" v-bind:gk="gk" v-on:click="removeGroup"><i class="fa fa-fw fa-times"></i></button>
                <button type="button" class="close" v-bind:gk="gk" v-on:click="editGroup"><i class="fa fa-fw fa-edit"></i></button>
                <h4 class="modal-title text-center"><strong>{{group.name}}</strong></h4>
            </div>
            <div class="modal-body">
                <div class="" v-for="(perm, pk) in group.permissions">
                    <div class="checkbox-slider--b-flat checkbox-slider-md" v-bind:gk="gk" v-bind:pk="pk" v-on:change="update"><label><input type="checkbox" v-model="perm.granted" /><span>{{perm.title}}</span></label></div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <button class="btn btn-primary col-md-12 col-xs-12 col-sm-12 m-t-15" id="newGroup">新增</button>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="newGroupModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="newGroupModalLabel">{{modallabel}}</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group" id="newGroupForm">
                        <label for="newGroupName">请输入组名</label>
                        <input type="text" class="form-control" id="newGroupName" placeholder="组名" v-model="editgroupname">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="addNewGroup">确认</button>
            </div>
        </div>
    </div>
</div>


